<template>
  <div class="table-name-wrapper" :style="getCurrentTextAlign">
    <div class="risk-level">
      <div :class="riskLevelClass">
        <!-- {{ row.riskLevel }} -->
        {{
          combinationRiskLevelOptions.find(item => item.value == row.riskLevel)
            ?.label || row.combRisk
        }}
      </div>
    </div>
  </div>
</template>

<script>
import { combinationRiskLevelOptions } from "@/enum/combinationHome/index.js"
export default {
  name: "riskTypeIcon",
  components: {},
  data() {
    return {
      combinationRiskLevelOptions,
    }
  },
  props: {
    row: {
      type: Object,
      required: true,
    },
    column: {
      type: Object,
      required: true,
    },
  },
  computed: {
    getCurrentTextAlign() {
      let align = this.column.align ? this.column.align : ""
      let str = `text-align:${align};`
      return str
    },
    riskLevelClass() {
      let { row } = this
      let className = ""
      switch (row.riskLevel || row.combRisk) {
        case "低风险":
          className = "risk-level1"
          break
        case "中低风险":
          className = "risk-level2"
          break
        case "中风险":
          className = "risk-level3"
          break
        case "中高风险":
          className = "risk-level4"
          break
        case "高风险":
          className = "risk-level5"
          break
        default:
          className = ""
      }
      return className
    },
  },
}
</script>

<style lang="less" scoped>
@import "~@/assets/styles/themeStyle.less";

.table-name-wrapper {
  width: 100%;
  display: flex;
  align-items: center;

  .label {
    font-size: 14px;
    color: @primaryTableHerfTextColor;
    width: 100%;
    word-break: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
    text-align: cneter;
  }
}
.risk-level() {
  display: inline-block;
  padding: 4px 8px !important;
  border-width: 1px;
  border-style: solid;
  font-size: 12px;
  line-height: 14px;
  border-radius: 13px;
}
// 低风险
.risk-level1 {
  .risk-level;
  color: #5ea7f0;
  background-color: #f3f9ff;
  border-color: #5ea7f0;
}

// 中低风险
.risk-level2 {
  .risk-level;
  color: #3fc1aa;
  background-color: #f1fffd;
  border-color: #3fc1aa;
}

// 中风险
.risk-level3 {
  .risk-level;
  color: #ebb837;
  background-color: #fffbf2;
  border-color: #ebb837;
}

// 中高风险
.risk-level4 {
  .risk-level;
  color: #f05ec7;
  background-color: #fff3ff;
  border-color: #f05ec7;
}

// 高风险
.risk-level5 {
  .risk-level;
  color: #f05e5e;
  background-color: #ffeded;
  border-color: #f05e5e;
}
</style>
